<include file="Public/min-header"/>
<script src="__PUBLIC__/js/jquery.event.drag.js" type="text/javascript"></script>
<style type="text/css">
    #container, .container {

    width: {
        $ config . width
    }

    px

    ;
    height: {
        $ config . height
    }

    px

    ;
    text-align: left

    ;
    margin:

    0
    ;
    position: relative

    ;
    overflow: hidden

    ;
    border:

    1
    px solid #d2d2d2

    ;
    background:
    url

    (
    {
        $ config . background
    }
    )
    0
    px

    0
    px no-repeat

    ;
    }

    .container .item {
        line-height: 20px;
        float: left;
        position: absolute;
        top: 0px;
        left: 0px;
        color: #666666;
        overflow: hidden;
        word-wrap: break-word;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        border: 1px dotted #999999;
        background: #ffffff;
        padding-left: 4px;
        color: #000;
    }

    .container .selected {
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        border: 1px solid #ff6600;
    }

    .container .item pre {
        height: 100%;
        float: left;
        padding: 0;
        margin: 0;
        border: 0;
        cursor: move;
    }

    .container textarea {
        padding-left: 0px;
        margin: 0px;
        font-size: 12px;
        resize: none;
        outline: none;
        overflow: hidden;
        border: none;
    }

    .container .resize {
        height: 6px;
        width: 6px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        overflow: hidden;
        cursor: nw-resize;
        background-color: #aaaaaa;
    }
</style>
<div class="wrapper">
    <include file="Public/breadcrumb"/>
    <section class="content">
        <!-- Main content -->
        <div class="container-fluid">
            <div class="pull-right">
                <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default"
                   data-original-title="返回"><i class="fa fa-reply"></i></a>
            </div>
            <form action="edit_shipping_print" id="inputForm" method="post" onsubmit="return checkForm()">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-list"></i> {$plugin.name}模板设置</h3>
                    </div>
                    <div class="panel-body">
                        <nav class="navbar navbar-default">
                            <div class="collapse navbar-collapse">
                                <div class="navbar-form  form-inline">
                                    <div class="form-group">
                                        宽度：<input type="text" id="width" class="form-control" name="width"
                                                  value="{$config.width}">
                                    </div>
                                    <div class="form-group">
                                        高度：<input type="text" class="form-control" id="height" name="height"
                                                  value="{$config.height}">
                                    </div>
                                    <div class="form-group">
                                        偏移量X：<input type="text" id="offset_x" class="form-control" name="offset_x"
                                                    value="{$config.offset_x}">
                                    </div>
                                    <div class="form-group">
                                        偏移量Y：<input type="text" class="form-control" id="offset_x" name="offset_y"
                                                    value="{$config.offset_y}">
                                    </div>
                                    <div class="form-group">
                                        <input type="hidden" id="content_map" name="content"
                                               value="{$plugin.config_value}">
                                        <input type="hidden" name="code" value="{$plugin.code}">
                                        <input type="button" class="btn btn-default"
                                               onclick="GetUploadify(1,'background_input','plugins','setImg')"
                                               value="背景图片">
                                    </div>
                                </div>
                            </div>
                        </nav>
                        <nav class="navbar navbar-default">
                            <div class="collapse navbar-collapse">
                                <div class="navbar-form form-inline">
                                    <div class="form-group">
                                        <select class="form-control" id="tagOption">
                                            <option value="">添加标签</option>
                                            <option value="发货点-名称">发货点-名称</option>
                                            <option value="发货点-联系人">发货点-联系人</option>
                                            <option value="发货点-电话">发货点-电话</option>
                                            <option value="发货点-省份">发货点-省份</option>
                                            <option value="发货点-城市">发货点-城市</option>
                                            <option value="发货点-区县">发货点-区县</option>
                                            <option value="发货点-手机">发货点-手机</option>
                                            <option value="发货点-详细地址">发货点-详细地址</option>
                                            <option value="收件人-姓名">收件人-姓名</option>
                                            <option value="收件人-手机">收件人-手机</option>
                                            <option value="收件人-电话">收件人-电话</option>
                                            <option value="收件人-省份">收件人-省份</option>
                                            <option value="收件人-城市">收件人-城市</option>
                                            <option value="收件人-区县">收件人-区县</option>
                                            <option value="收件人-邮编">收件人-邮编</option>
                                            <option value="收件人-详细地址">收件人-详细地址</option>
                                            <option value="时间-年">时间-年</option>
                                            <option value="时间-月">时间-月</option>
                                            <option value="时间-日">时间-日</option>
                                            <option value="时间-当前日期">时间-当前日期</option>
                                            <option value="订单-订单号">订单-订单号</option>
                                            <option value="订单-备注">订单-备注</option>
                                            <option value="订单-配送费用">订单-配送费用</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <input type="button" class="btn btn-default" id="deleteTag" value="删除标签">
                                    </div>
                                    <div class="form-group" style="margin-left:50px;">
                                        <input id="background_input" name="background" type="hidden"
                                               value="{$config.background}"/>
                                        <input type="submit" class="btn btn-info" value="保存模板">
                                    </div>
                                </div>
                            </div>
                        </nav>
                        <!--表单数据-->
                        <div id="container" class="container">
                            {$plugin.config_value|htmlspecialchars_decode}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
<script type="text/javascript">
    $().ready(function () {

        var $inputForm = $("#inputForm");
        var $addTag = $("#addTag");
        var $tagOption = $("#tagOption");
        var $deleteTag = $("#deleteTag");
        var $container = $("#container");
        var $browserButton = $("#browserButton");
        var $background = $("#background_input");
        var $width = $("#width");
        var $height = $("#height");
        var zIndex = 1;

        bind($container.find("div.item"));

        // 标签选项

        $tagOption.change(function () {
            var value = $(this).find("option:selected").val();
            if (value != "") {
                bind($('<div class="item"><pre>' + value + '<\/pre><div class="resize"><\/div><\/div>').appendTo($container));
            }
            return false;
        });

        // 绑定
        function bind($item) {
            $item.drag("start", function (ev, dd) {
                var $this = $(this);
                dd.width = $this.width();
                dd.height = $this.height();
                dd.limit = {
                    right: $container.innerWidth() - $this.outerWidth(),
                    bottom: $container.innerHeight() - $this.outerHeight()
                };
                dd.isResize = $(ev.target).hasClass("resize");
            }).drag(function (ev, dd) {
                var $this = $(this);
                if (dd.isResize) {
                    $this.css({
                        width: Math.max(20, Math.min(dd.width + dd.deltaX, $container.innerWidth() - $this.position().left) - 2),
                        height: Math.max(20, Math.min(dd.height + dd.deltaY, $container.innerHeight() - $this.position().top) - 2)
                    }).find("textarea").blur();
                } else {
                    $this.css({
                        top: Math.min(dd.limit.bottom, Math.max(0, dd.offsetY)),
                        left: Math.min(dd.limit.right, Math.max(0, dd.offsetX))
                    });
                }
            }, {relative: true}).mousedown(function () {
                $(this).css("z-index", zIndex++);
            }).click(function () {
                var $this = $(this);
                $container.find("div.item").not($this).removeClass("selected");
                $this.toggleClass("selected");
            }).dblclick(function () {
                var $this = $(this);
                if ($this.find("textarea").size() == 0) {
                    var $pre = $this.find("pre");
                    var value = $pre.hide().text($pre.html()).html();
                    $('<textarea>' + value + '<\/textarea>').replaceAll($pre).width($this.innerWidth() - 6).height($this.innerHeight() - 6).blur(function () {
                        var $this = $(this);
                        $this.replaceWith('<pre>' + $this.val() + '<\/pre>');
                    }).focus();
                }
            });
        }

        // 删除标签
        $deleteTag.click(function () {
            $container.find("div.selected").remove();
            return false;
        });

        $background.bind("input propertychange change", function () {
            $container.css({
                background: "url(/" + $background.val() + ") 0px 0px no-repeat"
            });
        });

        // 宽度
        $width.bind("input propertychange change", function () {
            $container.width($width.val());
        });

        // 高度
        $height.bind("input propertychange change", function () {
            $container.height($height.val());
        });


    });

    function checkForm(e) {
        if (e == null) {
            if ($.trim($("#container").html()) == "") {
                alert('模板内容不能为空！')
                return false;
            }
            if ($("#background_input").val() == "") {
                alert('请上传物流打印背景图片！')
                return false;
            }
            $("#content_map").val($("#container").html());
            return true;
        }
    }

    function setImg(value) {
        $("#background_input").val(value);
        $("#container").css({
            background: "url(" + value + ") 0px 0px no-repeat"
        });
    }
</script>
</body>
</html>